<template>
 <el-container class="container">
  <el-main>
   <el-row :span="24" type="flex" align="middle" justify="center" style="margin-top:12%">
    <el-col :span="6" >
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="text-align:center">
          <span style="font-size:25px">{{msg}}</span>
        </div>
        <div style="padding:20px">
          <el-form ref="form" label-width="0" >
            <el-form-item>
              <el-input placeholder="用户名" prefix-icon="el-icon-edit" v-model="username" name="username">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="密码" prefix-icon="el-icon-bell" v-model="password" type="password" name="password">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-row :span="24" :gutter="10">
                <el-col :span="14"><el-input placeholder="验证码" v-model="kaptcha"></el-input></el-col>
                <el-col :span="10"><img src="http://localhost:8801/llj-shiro/kaptcha.jpg" style="width:80%;height:40px;"></el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row :span="24" :gutter="20">
                <el-col :span="10" :offset="2"><el-button type="primary" round style="width:100%;" v-on:click="login">登录</el-button></el-col>
                <el-col :span="10"><el-button type="danger" round style="width:100%;">重置</el-button></el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
  </el-row>
  </el-main>
</el-container>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        msg: '后台管理系统',
        username:'',
        password:'',
        kaptcha:''
      }
    },
    methods:{
      login:function (event) {
        let param =new URLSearchParams();
        param.append("username",this.username);
        param.append("password",this.password);
        param.append("kaptcha",this.kaptcha)
        this.$api.post('/login',param,r => {
          // if (r&&r.success==='0') {
          //   this.$router.push('index')
          // }else{

          // }
          this.$router.push('index') 
        },r =>{
          if(r.message){
              alert(r.message);
            }
        })
      }
    }
  }
</script>
<style type="text/css">
  html,body{height: 100%;}
  body{margin:0;}
  .container{
    background-image: url(/static/images/bg.jpg);background-repeat:no-repeat;background-size:100%;height:100%;
  }
</style>
